<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<script src="./meizu/jquery-1.7.2.js"></script>
	<style type="text/css">
             #box{width: 1226px;height: 460px;margin: 50px auto 0; position: relative; overflow: hidden;}
             #canvas{width: 6130px; height: 460px; position: absolute;left: 0; top:0;}
             #canvas a {float: left;width: 1226px;height: 460px;}
             ul{ position: absolute; bottom:10px; width: 100%;text-align: center;}
             ul li{display: inline-block;list-style: none; width: 20px;height: 20px; border-radius: 10px;background-color: pink;color: white; font-size: 14px; text-align: center;line-height: 20px;}
             li.on{background: orange;}
	</style>
</head>
<body>
    <div id="box">
        <div id="canvas">
		  	 <a href=""><img src="./1.jpg" alt=""></a>
		  	 <a href=""><img src="./2.jpg" alt=""></a>
		  	 <a href=""><img src="./3.jpg" alt=""></a>
		  	 <a href=""><img src="./4.jpg" alt=""></a>
	  	     <a href=""><img src="./5.jpg" alt=""></a>
	    </div>
	    <ul>
	    	<li class="on">1</li>
	    	<li>2</li>
	    	<li>3</li>
	    	<li>4</li>
	    	<li>5</li>
	    </ul>
	</div>
	<script>
	     var time;
	     var init = 0 ;
	     var lis = document.getElementsByTagName('li');
	     var imgs = document.getElementsByTagName('img');
	     var canvas = document.getElementById('canvas');
	        start();
	    function start(){
		    time = setInterval(function(){
	             init++;
	             init %= 5;
	             canvas.style.left = init * -1226 + "px";
	                for (var i = 0; i < 5; i++) {
	                	lis[i].className="";
	                };	
	                lis[init].className='on';
		    },2000);
		}

	         for (var i = 0; i < 5; i++) {
		        imgs[i].onmouseover = function(){
		        	clearInterval(time);
		        }
		        imgs[i].onmouseout = function(){ 
		        	start();
		        }
	        };
	</script>	
</body>
<ml>





























